<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="/youtube.svg" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Youtube Clone" />
  <link rel="apple-touch-icon" href="/youtube.svg" />
  <title>YouTube</title>
  <link rel="stylesheet" href="./lib/video.js/video-js.min.css">
  <link href="./css/style.css" rel="stylesheet" />
  <link href="./css/layout.css" rel="stylesheet" />
  <link href="./css/home.css" rel="stylesheet" />
  <link rel="stylesheet" href="./css/pager.css">
  <link rel="stylesheet" href="./lib/toastify-js/toastify.css">
</head>

<body>
  <div id="root">
    <!-- 顶部栏 -->
    <div class="header">
      <div class="logo flex-row">
        <svg class="toggle-navhandler" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false"
          height="22" width="22" fill="#FFF">
          <g>
            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
          </g>
        </svg>
        <span><a href="/">YouTube</a></span>
      </div>
      <div class="searchBar">
        <input class="search" type="text" placeholder="Search" value="" />
      </div>
      <ul>
        <li>
          <div>
            <label for="video-upload">
              <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" height="27" width="27" fill="#FFF"
                focusable="false">
                <g>
                  <path
                    d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2z">
                  </path>
                </g>
              </svg>
            </label>
            <input id="video-upload" type="file" accept="video/*" style="display: none" />
          </div>
        </li>
        <li>
          <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="27" fill="#FFF"
            width="27">
            <g>
              <path
                d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z">
              </path>
            </g>
          </svg>
        </li>
        <li>
          <a href="/feed/my_videos">
            <img class="user pointer" src="images/user.png" alt="user-avatar" />
          </a>
        </li>
      </ul>
    </div>
    <!-- 侧边栏 -->
    <div class="sidebar">
      <a aria-current="page" class="active" href="/">
        <div class="icon">
          <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="22" width="22"
            fill="#AAAAAA">
            <g>
              <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8"></path>
            </g>
          </svg>
          <span>首页</span>
        </div>
      </a>
      <a href="/feed/trending">
        <div class="icon">
          <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="22" width="22"
            fill="#AAAAAA">
            <g>
              <path
                d="M17.53 11.2c-.23-.3-.5-.56-.76-.82-.65-.6-1.4-1.03-2.03-1.66-1.46-1.46-1.78-3.87-.85-5.72-.9.23-1.75.75-2.45 1.32C8.9 6.4 7.9 10.07 9.1 13.22c.04.1.08.2.08.33 0 .22-.15.42-.35.5-.22.1-.46.04-.64-.12-.06-.05-.1-.1-.15-.17-1.1-1.43-1.28-3.48-.53-5.12C5.87 10 5 12.3 5.12 14.47c.04.5.1 1 .27 1.5.14.6.4 1.2.72 1.73 1.04 1.73 2.87 2.97 4.84 3.22 2.1.27 4.35-.12 5.96-1.6 1.8-1.66 2.45-4.3 1.5-6.6l-.13-.26c-.2-.45-.47-.87-.78-1.25zm-3.1 6.3c-.28.24-.73.5-1.08.6-1.1.38-2.2-.16-2.88-.82 1.2-.28 1.9-1.16 2.1-2.05.17-.8-.14-1.46-.27-2.23-.12-.74-.1-1.37.2-2.06.15.38.35.76.58 1.06.76 1 1.95 1.44 2.2 2.8.04.14.06.28.06.43.03.82-.32 1.72-.92 2.26z">
              </path>
            </g>
          </svg>
          <span>时下流行</span>
        </div>
      </a>
      <a href="/feed/subscriptions">
        <div class="icon">
          <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="22" width="22"
            fill="#AAAAAA">
            <g>
              <path
                d="M18.7 8.7H5.3V7h13.4v1.7zm-1.7-5H7v1.6h10V3.7zm3.3 8.3v6.7c0 1-.7 1.6-1.6 1.6H5.3c-1 0-1.6-.7-1.6-1.6V12c0-1 .7-1.7 1.6-1.7h13.4c1 0 1.6.8 1.6 1.7zm-5 3.3l-5-2.7V18l5-2.7z">
              </path>
            </g>
          </svg>
          <span>订阅内容</span>
        </div>
      </a>
      <div class="ruler"></div>
      <a href="/feed/library">
        <div class="icon">
          <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="22" width="22"
            fill="#AAAAAA">
            <g>
              <path fill="none" d="M0 0h24v24H0z"></path>
              <path
                d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z">
              </path>
            </g>
          </svg>
          <span>媒体库</span>
        </div>
      </a>
      <a href="/feed/history">
        <div class="icon">
          <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="22" width="22"
            fill="#AAAAAA">
            <g>
              <path
                d="M11.9 3.75c-4.55 0-8.23 3.7-8.23 8.25H.92l3.57 3.57.04.13 3.7-3.7H5.5c0-3.54 2.87-6.42 6.42-6.42 3.54 0 6.4 2.88 6.4 6.42s-2.86 6.42-6.4 6.42c-1.78 0-3.38-.73-4.54-1.9l-1.3 1.3c1.5 1.5 3.55 2.43 5.83 2.43 4.58 0 8.28-3.7 8.28-8.25 0-4.56-3.7-8.25-8.26-8.25zM11 8.33v4.6l3.92 2.3.66-1.1-3.2-1.9v-3.9H11z">
              </path>
            </g>
          </svg>
          <span>历史记录</span>
        </div>
      </a>
      <a href="/feed/my_videos">
        <div class="icon">
          <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="22" width="22"
            fill="#AAAAAA">
            <g>
              <path
                d="M18.4 5.6v12.8H5.6V5.6h12.8zm0-1.8H5.6a1.8 1.8 0 0 0-1.8 1.8v12.8a1.8 1.8 0 0 0 1.8 1.9h12.8a1.8 1.8 0 0 0 1.9-1.9V5.6a1.8 1.8 0 0 0-1.9-1.8z">
              </path>
              <path d="M10.2 9v6.5l5-3.2-5-3.2z"></path>
            </g>
          </svg>
          <span>您的视频</span>
        </div>
      </a>
      <a href="/feed/liked_videos">
        <div class="icon">
          <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" fill="#AAAAAA" width="22"
            height="22">
            <g>
              <path
                d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z">
              </path>
            </g>
          </svg>
          <span>顶过的视频</span>
        </div>
      </a>
      <div class="ruler"></div>
      <div class="sc-AxheI bWrCIe"></div>
    </div>
    <!-- 上传视频弹出框 -->
    <div class="modal-wrapper" style="display: none;">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-header-left">
            <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false">
              <g>
                <path
                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z">
                </path>
              </g>
            </svg>
            <h3>Upload Video</h3>
          </div>
          <div style="display: block">
            <button class="next-button">Next</button>
          </div>
        </div>
        <div class="tab video-preview">
          <div>
            <!-- 视频播放 -->
            <video id="my-pre-player" class="video-js vjs-big-play-centered" controls preload="auto">
              <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser
                that
                <a href="https://videojs.com/html5-video-support/" target="_blank"> supports HTML5 video </a>
              </p>
            </video>
          </div>
        </div>
        <div class="tab video-form" style="display: none;">
          <h2>Details</h2>
          <input id="title" type="text" placeholder="Enter the title" value="" />
          <textarea id="description" placeholder="Tell viewers about your video"></textarea>
        </div>
      </div>
    </div>
    <!-- 主内容区域 -->
    <div class="main">
      <div class="home">
        <h2>推荐</h2>
        <div class="videos">

        </div>
        <!-- 分页条 -->
        <div class="pager">
        </div>
      </div>
    </div>
  </div>
  <script id="tpl" type="text/html">
    {{ each videos }}
    <a href="./watch.html?id={{ $value.id }}">
      <div class="video">
        <img class="thumb"
          src="{{ $value.thumbnail }}"
          alt="thumbnail" />
        <div class="video-info-container">
          <div class="channel-avatar">
            <img
              src="{{ $value.User.avatar }}"
              alt="channel avatar" class="sc-AxhCb eSwYtm" style="margin-right: 0.8rem" />
          </div>
          <div class="video-info">
            <h4>{{ $value.title }}</h4>
            <span class="secondary">{{ $value.description }}</span>
            <p class="secondary">
              <span>{{ $value.views }} views</span> <span>•</span>
              <span>{{ $value.createdAt | relativeTime }}</span>
            </p>
          </div>
        </div>
      </div>
    </a>
    {{ /each }}
  </script>

  <script src="./lib/jquery/jquery.min.js"></script>
  <script src="./lib/jquery.pager.js/src/jquery.pager.js"></script>
  <script src="./lib/art-template/template-web.js"></script>
  <script src="./lib/axios/axios.js"></script>
  <script src="./lib/dayjs/dayjs.min.js"></script>
  <script src="./lib/dayjs/plugin/relativeTime.js"></script>
  <script src="./lib/video.js/video.min.js"></script>
  <script src="./lib/toastify-js/toastify.js"></script>

  <script src="./scripts/utils.js"></script>
  <script src="./scripts/http.js"></script>
  <script src="./scripts/index.js"></script>
</body>

</html>